<template>
  <div class="login">
    <div class="content">
      <div class="content-img">
        <div class="content-img_form">
          <div class="form-title">
            <img src="@/assets/images/logo.png" class="logo"/>
            <div>智慧园区一体化管理平台</div>
          </div>
          <input placeholder="用户名" class="input-style" v-model="requestSms.username"/>
          <div class="error-tips">{{requestError.username}}</div>
          <input type="password" placeholder="密码" class="input-style" v-model="requestSms.password"/>
          <div class="error-tips">{{requestError.password}}</div>
          <div :class="['form-btn', disable ? 'form-btn_disable' : '']"  @click="clickLogin">登录</div>
          <!-- <div class="form-number">客服电话: 4001829666</div> -->
        </div>
      </div>
    </div>
    <div class="footer">
      <span>宁波育人教育科技有限公司 © 版权所有 浙公网安备33010502000246号</span>
      <a href="https://beian.miit.gov.cn" class="footer-link">浙ICP备12043000号-1</a>
    </div>
  </div>
</template>

<script>
import { getUserLogin } from '@/api/index.js'
import { setCookies } from '@/utils/cookie-util'
export default {
  name: 'Login',
  data() {
    return {
      requestSms: {
        username: '',
        password: ''
      },
      requestError: {
        username: '',
        password: ''
      },
      disable: false
    }
  },
  methods: {
    clickLogin () {
      if (this.requestSms.username == '') {
        this.requestError.username = '用户名不能为空'
        return
      }
      if (this.requestSms.password == '') {
        this.requestError.password = '密码不能为空'
        return
      }
      this.disable = true
      getUserLogin({
        userAccount: this.requestSms.username,
        password: this.requestSms.password
      }).then((res) => {
        this.disable = false
        let data = res.data
        if (data.code === '0') {
          setCookies(data.data)
          this.$router.replace({path: '/'})
        } else {
          this.requestError.password = data.message
        }
      }).catch((err) => {
        console.dir(err)
        console.log('请求出错')
      })
    },
  },
  watch: {
    requestSms: {
      deep: true,
      handler(newValue) {
        let _this = this
        if (newValue.username !== '') {
          _this.requestError.username = ''
        }
        if (newValue.password !== '') {
          _this.requestError.password = ''
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  margin: 0 auto;
  height: 100vh;
  background: url('../../assets/images/bgm.png') center center / 100% 100% no-repeat;
  .content {
    box-sizing: border-box;
    padding: 170px 200px 60px 69px;
    height: calc(100% - 100px);
    min-height: 800px;
    .content-img {
      width: 1812px;
      height: 587px;
      position: relative;
      background: url(../../assets/images/gradient_img.png) center center / 100% 100% no-repeat;
      .content-img_form {
        width: 504px;
        box-sizing: border-box;
        height: 574px;
        background-color: rgba(17, 34, 78, 0.71);
        border: 1px solid rgba(131, 194, 255, 0.22);
        border-radius: 13px;
        margin-left: 1050px;
        padding: 60px 43px 35px 43px;
        position: absolute;
        top: -40px;
        .form-title {
          color: #ffffff;
          font-size: 24px;
          margin-bottom: 35px;
          text-align: center;
          .logo {
            width: 60px;
            height: 60px;
            margin-bottom: 15px;
          }
        }
        .error-tips {
          line-height: 30px;
          color: #FF2F3E;
          margin-bottom: 20px;
          padding-left: 18px;
          font-size: 16px;
        }
        .input-style {
          width: 100%;
          outline: none;
          height: 50px;
          box-sizing: border-box;
          border: 1px solid rgba(17, 34, 78);
          border-radius: 20px;
          padding: 18px;
          font-size: 16px;
          color: #9ea6b2;
          background-color: rgba(17, 34, 78, 0.71);
        }
        input::-webkit-input-placeholder {
          color: #9ea6b2;
          font-weight: 300;
        }
        input::-moz-input-placeholder {
          color: #9ea6b2;
          font-weight: 300;
        }
        input::-ms-input-placeholder {
          color: #9ea6b2;
          font-weight: 300;
        } 
        .code-style {
          display: flex;
          align-items: center;
          .input-code {
            width: 50%;
            margin-bottom: 0;
          }
          .security-code {
            width: 118px;
            height: auto;
            margin-left: 14px;
          }
          .code-text {
            color: #3685f2;
            font-size: 18px;
            margin-left: 13px;
          }
        }
        .forget-psw {
          margin: 18px 0;
          text-align: right;
          color: #ffffff;
          font-size: 18px;
        }
        .form-btn {
          background: linear-gradient(90deg, #5ECEFD, #5B43E7);
          font-size: 24px;
          color: #FFFFFF;
          line-height: 50px;
          border-radius: 20px;
          text-align: center;
          font-family: SourceHanSansCN;
          font-weight: 300;
          margin-top: 50px;
          cursor: pointer;
        }
        .form-btn_disable {
          pointer-events: none;
        }
        .form-number {
          text-align: center;
          color: #ffffff;
          font-size: 24px;
          margin-top: 31px;
        }
      }
    }
  }
  .footer {
    height: 100px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    .footer-link {
      color: #337ab7;
      margin-left: 10px;
      text-decoration: none;
    }
  }
}
</style>